<template>
	<view class="container">
		<!-- 分数展示区 -->
		<view class="score-section">
			<view class="score-item">
				<text class="score-label">总分</text>
				<text class="score-value">{{ score }}</text>
			</view>
			<view class="score-item">
				<text class="score-label">答题数</text>
				<text class="score-value">{{ totalQuestions }}</text>
			</view>
			<view class="score-item">
				<text class="score-label">正确率</text>
				<text class="score-value">{{ correctRate }}%</text>
			</view>
		</view>
		<!-- 顶部筛选区 -->
		<view class="filter-section">
			<view class="filter-item">
				<picker @change="handleRankChange" :value="rankIndex" :range="rankList" range-key="name">
					<view class="picker-text">{{ rankList[rankIndex].name }}</view>
				</picker>
			</view>
			<view class="filter-item">
				<picker @change="handleTypeChange" :value="typeIndex" :range="typeList" range-key="name">
					<view class="picker-text">{{ typeList[typeIndex].name }}</view>
				</picker>
			</view>
		</view>

		<!-- 题目列表 -->
		<scroll-view class="question-list" scroll-y @scrolltolower="loadMore">
			<view v-for="(item, index) in questionList" :key="item.id" class="question-item" @click="goToDetail(item)">
				<view class="question-title">
					<text class="question-index">{{ index + 1 }}.</text>
					<text class="title-text">{{ item.title }}</text>
				</view>
				<image v-if="item.titlePic" :src="item.titlePic" mode="aspectFit" class="question-image"></image>
				<view class="options-list">
					<view class="option-item" v-if="item.op1">{{ item.op1 }}</view>
					<view class="option-item" v-if="item.op2">{{ item.op2 }}</view>
					<view class="option-item" v-if="item.op3">{{ item.op3 }}</view>
					<view class="option-item" v-if="item.op4">{{ item.op4 }}</view>
				</view>
			</view>
			<uni-load-more :status="loadMoreStatus"></uni-load-more>
		</scroll-view>
		<!-- 版权信息 -->
		<view class="copyright-section">
			<text class="copyright-item">作者：坚果派</text>
			<text class="copyright-item">公众号：nutpi</text>
			<text class="copyright-item">电话：17752170152</text>
			<text class="copyright-item">官网：https://www.nutpi.net/</text>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue'

export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			score: 0,
			totalQuestions: 0,
			correctAnswers: 0,
			rankList: [
				{ id: 1, name: '小车 C1/C2/C3' },
				{ id: 2, name: '货车 A2/B2' },
				{ id: 3, name: '客车 A1/A3/B1' },
				{ id: 4, name: '摩托车 D/E/F' }
			],
			typeList: [
				{ id: 1, name: '科目一' },
				{ id: 2, name: '科目四' }
			],
			rankIndex: 0,
			typeIndex: 0,
			page: 1,
			questionList: [],
			loadMoreStatus: 'more',
			appId: 'jijnkniwlmswemjf',
			appSecret: 'og1FoKNxT0IJMZNdb1UYkcidZBwTjgeE'
		}
	},
	onLoad() {
		this.loadQuestionList()
		this.loadExamScore()
	},
	onShow() {
		this.loadExamScore()
	},
	methods: {
		handleRankChange(e) {
			this.rankIndex = e.detail.value
			this.page = 1
			this.questionList = []
			this.loadQuestionList()
			this.loadExamScore()
		},
		handleTypeChange(e) {
			this.typeIndex = e.detail.value
			this.page = 1
			this.questionList = []
			this.loadQuestionList()
			this.loadExamScore()
		},
		async loadQuestionList() {
			try {
				this.loadMoreStatus = 'loading'
				const rank = this.rankList[this.rankIndex].id
				const type = this.typeList[this.typeIndex].id
				const url = `https://www.mxnzp.com/api/driver_exam/question/list?page=${this.page}&rank=${rank}&type=${type}&app_id=${this.appId}&app_secret=${this.appSecret}`

				const res = await uni.request({
					url,
					method: 'GET'
				})

				if (res.data.code === 1) {
					const { list } = res.data.data
					this.questionList = [...this.questionList, ...list]
					this.loadMoreStatus = list.length < 10 ? 'noMore' : 'more'
				} else {
					uni.showToast({
						title: '获取题目失败',
						icon: 'none'
					})
					this.loadMoreStatus = 'more'
				}
			} catch (e) {
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				})
				this.loadMoreStatus = 'more'
			}
		},
		loadMore() {
			if (this.loadMoreStatus === 'more') {
				this.page++
				this.loadQuestionList()
			}
		},
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${item.id}`
			})
		},
		loadExamScore() {
			const currentRank = this.rankList[this.rankIndex].id
			const currentType = this.typeList[this.typeIndex].id
			const storageKey = `examScore_${currentRank}_${currentType}`
			const examRecord = uni.getStorageSync(storageKey) || {
				score: 0,
				totalQuestions: 0,
				correctAnswers: 0
			}
			this.score = examRecord.score
			this.totalQuestions = examRecord.totalQuestions
			this.correctAnswers = examRecord.correctAnswers
		}
	},
	computed: {
		correctRate() {
			if (this.totalQuestions === 0) return 0
			return Math.round((this.correctAnswers / this.totalQuestions) * 100)
		}
	}
}
</script>

<style>
.container {
	padding: 20rpx;
	padding-bottom: 120rpx;
}

.score-section {
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.score-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.score-label {
	font-size: 24rpx;
	color: #666;
}

.score-value {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	margin-top: 10rpx;
}

.filter-section {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
}

.filter-item {
	width: 48%;
	background-color: #fff;
	padding: 15rpx;
	border-radius: 8rpx;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
}

.question-list {
	height: calc(100vh - 300rpx);
}

.question-item {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.question-title {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15rpx;
}

.question-index {
	font-size: 28rpx;
	color: #666;
	margin-right: 10rpx;
}

.title-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
}

.question-image {
	width: 100%;
	height: 300rpx;
	margin: 10rpx 0;
}

.options-list {
	margin-top: 15rpx;
}

.option-item {
	font-size: 26rpx;
	color: #666;
	padding: 10rpx 0;
	line-height: 1.4;
}

.copyright-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.copyright-item {
	font-size: 24rpx;
	color: #666;
	line-height: 1.8;
	transition: color 0.3s;
}

.copyright-item:hover {
	color: #333;
}
</style>
